﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="exemplo_MS_datasource_combination.aspx.cs" Inherits="WebApplication1.exemplo_MS_datasource_combination" %>

<%@ Register Assembly="Libero.FusionCharts" Namespace="Libero.FusionCharts.Control" TagPrefix="fcl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>
    body
        {
        	font-family: Calibri, Arial, Tahoma;
        }
        .container
        {
    	    width:800px;
    	    border:solid 1px #ccc;
    	    padding-top: 10px;
    	    padding-bottom:10px;
        }
    pre
	{margin-bottom:.0001pt;
	font-size:10.0pt;
	font-family:"Courier New";
	        margin-left: 0cm;
            margin-right: 0cm;
            margin-top: 0cm;
        }
    p.MsoNormal
	{margin-top:0in;
	margin-right:0in;
	margin-bottom:10.0pt;
	margin-left:0in;
	line-height:115%;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";
	}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>Multi Series Chart, adding data by DataSource.</h3>

        <fcl:FChart runat="server" ID="chtProductSales" Width="530" Height="300" />
        <br /><br />

        Supose your data is comming from a database in the following way: 
        <div class="container">
            <img src="images/ds03.png" />
        </div>
        
        <br />
        In your ASPX page you simply need to add a FChart control. It acts just as a place holder for the chart. 
        <br />
        Here you’ll also define the width and height of your chart.
        <div class="container">
            <pre><span style="font-family: Consolas; background: yellow">&lt;%</span><span 
                style="font-family:Consolas;color:blue">@</span><span 
                style="font-family:Consolas">&nbsp;<span style="color:maroon">Register</span>&nbsp;<span 
                style="color:red">Assembly</span><span style="color:blue">=&quot;Libero.FusionCharts&quot;</span>&nbsp;<span 
                style="color:red">Namespace</span><span style="color:blue">=&quot;Libero.FusionCharts.Control&quot;</span>&nbsp;<span 
                style="color:red">TagPrefix</span><span style="color:blue">=&quot;fcl&quot;</span>&nbsp;<span 
                style="background: yellow">%&gt;</span><o:p></o:p></span></pre>
            <pre><span style="font-family:Consolas;color:blue">&lt;</span><span style="font-family:
Consolas;color:maroon">fcl</span><span style="font-family:Consolas;color:blue">:</span><span 
                style="font-family:Consolas;color:maroon">FChart</span><span style="font-family:
Consolas">&nbsp;<span style="color:red">runat</span><span style="color:blue">=&quot;server&quot;</span>&nbsp;<span 
                style="color:red">ID</span><span style="color:blue">=&quot;chtProductSales&quot;</span>&nbsp;<span 
                style="color:red">Width</span><span style="color:blue">=&quot;530&quot;</span>&nbsp;<span 
                style="color:red">Height</span><span style="color:blue">=&quot;300&quot;</span>&nbsp;<span 
                style="color:blue">/&gt;</span><o:p></o:p></span></pre>
        </div>

        <br />
        It behaves like any other Multi Series Chart. The only difference is that in a <br />
        combination chart you have to set the Axis Type with the category name you want to be draw as a line.
        <br /><br />
        <i>See oChart.SetAxisType()</i>
        <br />
        <div style="font-size:0.8em;">
            <div style="padding-left:20px;">
                  </div>
        </div>
        <div class="container">
            <pre><span style="font-family:Consolas;color:#2B91AF">MSBar2DChart</span><span 
                style="font-family:Consolas">&nbsp;oChart&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;<span 
                style="color:#2B91AF">MSBar2DChart</span>();

<span style="color:green">//&nbsp;Set&nbsp;properties</span>
oChart.Background.BgColor&nbsp;=&nbsp;<span style="color:#A31515">&quot;ffffff&quot;</span>;
oChart.Background.BgAlpha&nbsp;=&nbsp;50;
oChart.ChartTitles.Caption&nbsp;=&nbsp;<span style="color:#A31515">&quot;#&nbsp;Mobile&nbsp;in&nbsp;last&nbsp;months&quot;</span>;

<span style="color:green">//&nbsp;Set&nbsp;a&nbsp;template</span>
oChart.Template&nbsp;=&nbsp;<span style="color:blue">new</span>&nbsp;Libero.FusionCharts.Template.<span 
                style="color:#2B91AF">OfficeLightTemplate</span>();

<span style="color:green">//&nbsp;Set&nbsp;data&nbsp;&nbsp;&nbsp;*DataTable&nbsp;OR&nbsp;IList&lt;T&gt;</span>
<span style="color:#2B91AF">DataTable</span>&nbsp;dtSample&nbsp;=&nbsp;GetSalesDataTable();
oChart.DataSource&nbsp;=&nbsp;dtSample;
oChart.DataCategoryTextField&nbsp;=&nbsp;<span style="color:#A31515">&quot;Month&quot;</span>;
oChart.DataSeriesTextField&nbsp;=&nbsp;<span style="color:#A31515">&quot;Brand&quot;</span>;
oChart.DataSeriesValueField&nbsp;=&nbsp;<span style="color:#A31515">&quot;Quantity&quot;</span>;</span></pre>
            <pre>&nbsp;</pre>
            <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:
normal;mso-layout-grid-align:none;text-autospace:none">
                <span style="font-size:
9.5pt;font-family:Consolas;color:green">// Set the special category (Secundary. Will by draw as 
                a line, not a column)</span><span style="font-size:9.5pt;
font-family:Consolas"><o:p></o:p></span></p>
            <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:
normal;mso-layout-grid-align:none;text-autospace:none">
                <span style="font-size:
9.5pt;font-family:Consolas">oChart.SetAxisType(<span style="color:#A31515">&quot;Market Average&quot;</span>,
                <span style="color:#2B91AF">CombinationAxisType</span>.Secundary);<o:p></o:p></span></p>
            <pre><span 
                style="font-family:Consolas">
<span style="">&nbsp;</span>
<span style="color:green">//&nbsp;Link&nbsp;the&nbsp;WebControl&nbsp;and&nbsp;the&nbsp;Chart</span>
chtProductSales.ShowChart(oChart);<o:p></o:p></span></pre>
        </div>
    </div>
    </form>
</body>
</html>
